<template>
  <div class="league-list">
    <div :style="{ display: 'flex', flexDirection: 'row', flexWrap: 'wrap', justifyContent: 'flex-start', alignItems: 'flex-start', marginLeft: '1.27%' }">
      <div v-for="(item, index) in leagueList" :key="index" @click="leagueListClick(item)" :style="{ width: '38.9%', height: (98 / 96) + 'rem', background: leagueId == item.id ? 'rgba(97, 104, 254, 0.5)' : 'rgba(238, 238, 238, 1)', borderRadius: leagueId == item.id ? (10 / 96) + 'rem' : (8 / 96) + 'rem', marginLeft: '4.6%', marginRight: '4.6%', marginBottom: (15 / 96) + 'rem', cursor: 'pointer' }">
        <div style="width: 100%; height: 100%; display: flex; flex-direction: row; justify-content: flex-start; align-items: center;">
          <div :style="{ width: (84 / 96) + 'rem', height: (84 / 96) + 'rem', borderRadius: '50%', marginLeft: '4.85%', marginRight: '5%', display: 'flex', flexDirection: 'row', justifyContent: 'center', alignItems: 'center' }">
            <img style="width: 100%; height: 100%; border-radius: 50%;" :src="item.leagueImage" />
          </div>
          <div :style="{ width: '66%',  height: '100%', display: 'flex', flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'center' }">
            <span :style="{ fontSize: (32 / 96) + 'rem', fontFamily: 'KaiTi', fontWeight: '400', color: '#333333', lineHeight: (40 / 96) + 'rem', textOverflow: '-o-ellipsis-lastline', overflow: 'hidden', textOverflow: 'ellipsis', display: '-webkit-box', '-webkitLineClamp': 2, 'lineClamp': 2, '-webkitBoxOrient': 'vertical' }">{{ item.title }}</span>
          </div>
          <div :style="{ width: '11%',  height: '100%', display: 'flex', flexDirection: 'row', justifyContent: 'center', alignItems: 'center' }">
            <span :style="{ fontSize: (32 / 96) + 'rem', fontFamily: 'YouYuan, KaiTi', fontWeight: '400', color: '#555DFF', lineHeight: (24 / 96) + 'rem' }">{{ item.leagueNum }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'LeagueList',
    props: {
      leagueId: {
        type: Number,
        default() {
          return 0;
        }
      },
      leagueList: {
        type: Array,
        default() {
          return [];
        }
      }
    },
    data() {
      return {

      }
    },
    methods: {
      leagueListClick(id) {
        this.$emit("leagueListClick", id);
      }
    }
  }
</script>

<style>
  /* .league-list {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
  } */
</style>
